<template>
	<view>
		<u-navbar :title="doctorData.doctorName" :autoBack="true"></u-navbar>
		<view class="MaxBox" v-if="isShow">
			<view class="doctor">
				<image :src="doctorData.doctorHeadImg" mode="heightFix"></image>
				<view class="conBox">
					<text>{{doctorData.doctorName}}</text>
					<text style="color: rgb(143,195,31);">{{doctorData.doctorShowting}}人收听</text>
				</view>
				<image src="./image/mingpianRight2.png" mode="heightFix" @click="guanzhu2" v-if="imageShow"></image>
				<image src="./image/mingpianRight.png" mode="heightFix" @click="guanzhu" v-else></image>
			</view>
			<view class="textBox">
				<text>{{doctorData.doctorContent}}</text>
				<el-button>医疗健康</el-button>
			</view>
			<view class="bgBox"></view>
			<!-- 提问 -->
			<ask :doctorData='doctorData' @sonData='getData'></ask>
			<view class="bgBox"></view>
			<!-- 历史提问 -->
			<view class="historyAsk">
				<h3>历史提问</h3>
				<question :speakData='speakData'></question>
			</view>
		</view>
		<view class="kong" v-else>
			暂无查询到...
		</view>
	</view>

</template>

<script>
	import ask from './noPages/putQuestions.vue'
	import question from './noPages/question.vue'
	export default {
		data() {
			return {
				id: 0,
				doctorData: {},
				speakData: [],
				isShow: true,
				imageShow: false
			};
		},
		components: {
			ask,
			question
		},
		onLoad({
			id
		}) {
			// console.log(id)
			if (id == 0) {
				this.isShow = false
			}
			this.id = id
			this.$api.getMjtDoctorId(id).then(res => {
				// console.log(res)
				if (res.code == 200) {
					this.doctorData = res.data
				}
			})
			this.$api.getMjtSpeakUid(id).then(res => {
				// console.log(res)
				if (res.code == 200) {
					this.speakData = res.data.filter(item => item.isOpen == '1')
				}
			})
			this.$api.getMjtGuanzhuUid(id).then(res => {
				// console.log(res)
				if (res.code == 200 && res.data.length !== 0) {
					this.imageShow = true
				}
			})
		},
		methods: {
			getData() {
				this.$api.getMjtSpeakUid(this.doctorData.id).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.speakData = res.data.filter(item => item.isOpen == '1')
					}
				})
			},
			guanzhu() {
				this.$api.getMjtGuanzhuUid(this.id).then(res => {
					// console.log(res)
					if (res.code == 200 && res.data.length == 0) {
						this.$api.postMjtGuanzhu({
							doctorName: this.doctorData.doctorName,
							uid: this.id,
							doctorHeadImg: this.doctorData.doctorHeadImg,
							doctorDepartment: this.doctorData.doctorDepartment,
							doctorAnswer: this.doctorData.doctorAnswer,
							doctorShowting: this.doctorData.doctorShowting,
						}).then(res => {
							this.imageShow = true
						})
					}
				})
			},
			guanzhu2() {
				this.$api.getMjtGuanzhuUid(this.id).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.$api.deleteMjtGuanzhu(res.data[0].id).then(res => {
							// console.log(res)
							if (res.code == 200) {
								this.imageShow = false
							}
						})
					}
				})
			}
		}

	}
</script>

<style lang="less">
	.kong {
		margin-top: 88upx;
	}

	/deep/.u-navbar__content {
		background-color: rgb(48, 50, 56) !important;
		color: white;
	}

	/deep/.u-line-1,
	.u-icon__icon {
		color: white !important;
		font-weight: bold;
	}

	/deep/.u-icon__icon {
		color: white !important;
	}

	::v-deep .el-dialog {
		width: 70%;
		height: 15vh;
		margin-top: 35vh !important;
		border-radius: 24upx;
		overflow: hidden;
	}

	::v-deep .el-dialog__header,
	.el-dialog__footer {
		display: none;
	}

	::v-deep .el-dialog__body {
		height: 100%;
		padding: 0;
		display: flex;
		flex-direction: column;

		text {
			display: block;
			height: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40upx;
			text-align: center;
			border-bottom: 2upx solid rgba(203, 203, 203, 0.5);
		}

		.bottom {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36upx;
		}

	}

	.neiZzc ::v-deep .el-dialog__body {
		height: 100%;
		padding: 0;
		font-size: 32upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
		color: rgb(114, 156, 25);
	}

	.MaxBox {
		width: 100vw;
		margin-top: 88upx;
		padding: 0;

		.doctor {
			width: 90%;
			height: 15vh;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 20upx 0;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(203, 203, 203, 0.5);

			image:first-child {
				height: 80%;
			}

			image:last-child {
				height: 35%;
			}

			.conBox {
				flex: 1;
				height: 100%;
				font-size: 26upx;
				box-sizing: border-box;
				padding: 0 3%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				text:nth-child(1) {
					font-size: 36upx;
				}

				text:nth-child(2) {
					color: rgba(0, 0, 0, 0.7);
				}

				text:nth-child(3) {
					color: rgba(0, 0, 0, 0.5);
				}
			}
		}

		.textBox {
			width: 90%;
			margin: 0 auto;
			padding: 20upx 0;
			text-indent: 2rem;
			color: rgba(0, 0, 0, 0.5);
			font-size: 30upx;

			.el-button {
				display: block;
				margin-top: 10px;
			}
		}

		.bgBox {
			height: 20upx;
			background-color: rgb(236, 236, 236);
		}

		.historyAsk {
			h3 {
				padding: 20upx;
				border-bottom: 2upx solid rgba(203, 203, 203, 0.5);
			}
		}
	}
</style>
